<template>
  <div class="container">

    <el-form :model="searchList" ref="searchList" size="normal">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.name" placeholder="机构名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <div class="left">
            <el-button type="primary" size="default" @click="search">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData" border stripe :height="offsetHeight" v-loading="loading" ref="tableData" row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="名称" align='left' header-align="center" tree>
      </el-table-column>
      <el-table-column prop="area_name" label="归属区域" width="120" align="center">
      </el-table-column>
      <el-table-column prop="sys_area" label="区域编码" width="120" align="center">
      </el-table-column>
      <el-table-column prop="code" label="机构编码" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="mini" @click="onAdd(row)">添加下级</el-button>
            <el-button type="green" size="mini" @click="onEdit(row)">修改</el-button>
            <el-button type="danger" size="mini" @click="onDel(row.id)" :loading="saveLoading">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="机构信息" :visible.sync="orgshow" size="70%" :before-close="cancel" center :destroy-on-close="true">
      <edit :org-id="orgId" :org-params="orgParams" :area-list="areaList" @cancel="cancel" @init="init"></edit>
    </el-drawer>
  </div>
</template>
<script>
import Edit from './edit.vue'
export default {
  name: 'organization',
  components: {
    Edit
  },
  props: {

  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 210,
      loading: false,
      saveLoading: false,
      searchList: {},
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      tableData: [],
      areaList: [],
      orgshow: false,
      orgId: '',
      orgParams: {}
    }
  },
  created () {
    this.area()
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('sysOrgList', {
      })
      this.tableData = this.toTree(res, 'children', 'id', 'parent_id')
      this.loading = false
    },
    async area () {
      const area = await this.$http('sysArea', {
      })
      this.areaList = area
    },
    search () {
      this.$tips.warning('没想好怎么写!!!')
    },
    onAdd (item) {
      this.orgParams = {
        USEABLE: '1', // 是否启用
        super_name: item.name, // 上级机构名称
        parent_id: item.id, // 上级机构id
        sys_area: item.sys_area, // 运营商编号
        area_id: item.area_id, // 归属区域
        type: item.type, // 机构类型
        grade: parseInt(item.grade) + 1 + '', // 机构等级
        sort: parseInt(item.sort) + 30 // 排序
      }
      this.orgshow = true
    },
    onEdit (item) {
      this.orgId = item.id
      this.orgshow = true
    },
    async onDel (id) {
      this.saveLoading = true
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$http('sysOrgDel', {
          id: id
        })
        this.$tips.success(res.errmsg)
        this.saveLoading = false
        this.init()
      }).catch(() => {
        this.saveLoading = false
      });
    },
    cancel () {
      this.orgId = ''
      this.orgIParams = {}
      this.orgshow = false
    },
    handleNodeClick (data) {

    },
    // 菜单遍历重组结构
    toTree (data, children_key, id_key, pid_key) {
      let child_key = children_key || 'children'
      let id = id_key || 'id'
      let pid = pid_key || 'pid'
      // 删除无用子节点
      data.forEach(item => {
        delete item[child_key]
      })
      // 定义map,给map赋值
      let map = {}
      data.forEach(item => {
        map[item[id]] = item
      })
      // 遍历处理
      let arr = []
      data.forEach(item => {
        // 定义父节点
        let parent = map[item[pid]]
        if (parent) {
          (parent[child_key] || (parent[child_key] = [])).push(item)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
</style>
